<template>
    <div class="detail-page">
        <!-- 头图 -->
        <CqTheme img="news-banner" height="200px" des1="橙券新闻动态" des2="新闻动态抢先看，从能力输出到技术赋能，橙券从未放缓脚步，只为与您见证橙券成长的每一步！"></CqTheme>
        <div class="content w1160">
            <!-- 面包屑导航 -->
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/news' }">新闻动态</el-breadcrumb-item>
                <el-breadcrumb-item>{{ newsDetail.title }}</el-breadcrumb-item>
            </el-breadcrumb>
            <!-- 新闻详情内容 -->
            <div class="detail-content">
                <h2 class="h2 title fz30 text-center">{{ newsDetail.title }}</h2>
                <p class="time fz16 text-center">{{ newsDetail.updatedAt }}</p>
                <div class="fz16" v-html="newsDetail.content"></div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'DetailPage',
  data () {
    return {
      newsDetail: {}
    }
  },
  methods: {
    async getNewsDetail () {
      const { id } = this.$route.params
      const { data } = await this.$req(`/news/${id}`, 'get')
      this.newsDetail = data
    }
  },
  created () {
    this.getNewsDetail()
  }
}
</script>

<style lang="scss" scoped>
.content {
    padding: 50px 0 50px;
    .detail-content {
        h2 {
            margin-top: 60px;
        }
        .time {
            margin: 20px 0 30px;
        }
    }
}
</style>
